<template>
  <div id="Takeeffect">
    <div class="spinner" v-show="spinner">
      <div class="bounce1"></div>
      <div class="bounce2"></div>
      <div class="bounce3"></div>
    </div> 
    <div class="ge"></div>
    <div v-for="item in Content">
        <div class="contentTwo-head">
            <div>
                <div class="contentTwo-left"><span>{{item.SERVERPART_NAME | dateEmpty}}</span></div>
                <div class="contentTwo-right">               
                    <span>生效提醒</span>
                </div>
                <br />
            </div>
            <div>
                <div class="contentTwo-name"><span class="contentTwo-text">{{item.DEPT_NAME | dateEmpty}}</span></div>
                <br />
            </div>
            <div>
                <div class="lie-left">通知人员：</div>
                <div class="lie_right"><span>{{item.STAFF_NAME | dateEmpty}}</span></div>
                <br />
            </div>					
            <div>
                <div class="lie-left">通知时间：</div>
                <div class="lie_right"><span>{{item.HIGHWAYPROINST_ENDDATE | dateEmpty}}</span></div>
                <br />
            </div>               
        </div>   
    </div>
    <p class="commodityP" v-show="!spinner">生效详情</p>
    <div class="commodity" v-for="(item,i) in commodity" :key="i">
      <p>{{item.COMMODITYTYPE_NAME | dateEmpty}} <s v-show="contrastCom(item.COMMODITYTYPE_NAME,item.F_COMMODITYTYPE_NAME)">{{item.F_COMMODITYTYPE_NAME | dateEmpty}}</s></p>
      <div class="commodityZ">
        <p>【商品名称】{{item.COMMODITY_NAME | dateEmpty}} <s v-show="contrastCom(item.COMMODITY_NAME,item.F_COMMODITY_NAME)">{{item.F_COMMODITY_NAME | dateEmpty}}</s></p>  
        <p>【商品条码】{{item.COMMODITY_BARCODE | dateEmpty}} <s v-show="contrastCom(item.COMMODITY_BARCODE,item.F_COMMODITY_BARCODE)">{{item.F_COMMODITY_BARCODE | dateEmpty}}</s></p>
        <p v-show="contrastCom(item.COMMODITY_UNIT,item.F_COMMODITY_UNIT)">【商品单位】{{item.COMMODITY_UNIT | dateEmpty}} <s>{{item.F_COMMODITY_UNIT | dateEmpty}}</s></p>
        <p v-show="contrastCom(item.COMMODITY_RULE,item.F_COMMODITY_RULE)">【商品规格】{{item.COMMODITY_RULE | dateEmpty}} <s>{{item.F_COMMODITY_RULE | dateEmpty}}</s></p>
        <p v-show="contrastCom(item.COMMODITY_STATE,item.F_COMMODITY_STATE)">【商品状态】{{item.COMMODITY_STATE | ComState}} <s>{{item.F_COMMODITY_STATE | ComState}}</s></p>
        <p v-show="contrastCom(item.COMMODITY_ORIPRICE,item.F_COMMODITY_CURRPRICE)">【当前价格】{{item.COMMODITY_ORIPRICE | ComMoney}} <s>{{item.F_COMMODITY_CURRPRICE | ComMoney}}</s></p>
        <p v-show="contrastCom(item.COMMODITY_RETAILPRICE,item.F_COMMODITY_RETAILPRICE)">【零售价格】{{item.COMMODITY_RETAILPRICE | ComMoney}} <s>{{item.F_COMMODITY_RETAILPRICE | ComMoney}}</s></p>
        <p v-show="contrastCom(item.COMMODITY_PURCHASEPRICE,item.F_COMMODITY_PURCHASEPRICE)">【进货价格】{{item.COMMODITY_PURCHASEPRICE | ComMoney}} <s>{{item.F_COMMODITY_PURCHASEPRICE | ComMoney}}</s></p>
        <p v-show="contrastCom(item.CANSALE,item.F_CANSALE)">【是否可售】{{item.CANSALE | ComSell}} <s>{{item.F_CANSALE | ComSell}}</s></p>
        <p v-show="contrastCom(item.ISBULK,item.F_ISBULK)">【是否散装】{{item.ISBULK | ComBulk}} <s>{{item.F_ISBULK | ComBulk}}</s></p>       
        <p v-show="contrastCom(item.METERINGMETHOD,item.F_METERINGMETHOD)">【称重方式】{{item.METERINGMETHOD | ComWeigh}} <s>{{item.F_METERINGMETHOD | ComWeigh}}</s></p>
        <div> 
          <div v-show="vaildShow[i]">
            【已生效收银机】：
            <div v-for="(vai,j) in infor1[i]" :key="j">
              <p class="store">{{j+1}}.{{vai.store}}</p>
              <p class="machine">{{vai.machine}}</p>
            </div>
          </div>
          <div v-show="invaildShow[i]">
            【未生效收银机】：
            <div v-for="(invai,k) in infor2[i]" :key="k">
              <p class="store">{{k+1}}.{{invai.store}}</p>
              <p class="machine">{{invai.machine}}</p>
            </div>
          </div>         
        </div>
      </div>
    </div>      
  </div>
</template>

<script>
import store from "@/store/store.js";
export default {
  name: "Takeeffect",
  data() {
    return {
      Url:
        "http://mall.eshangtech.com:8010/MobileServicePlatform/Handler/handler_ajax.ashx?",
      Content: [],
      spinner: true,
      commodity: [],
      infor1: [],
      infor2: [],
      vaildShow: [],
      invaildShow: []
    };
  },
  methods: {
    getData: function() {
      this.$http
        .get(
          this.Url +
            "action_type=GetApproveInfo&action_data=" +
            this.$route.params.id
        )
        .then(response => {
          // success callback
          this.spinner = false;
          this.Content = response.data.HIGHWAYPROINST;
        })
        .catch(error => {
          // console.log(error);
        });
    },
    // 商品变更信息
    loadCommodity: function() {
      this.$http
        .get(
          this.Url +
            "action_type=GetApproveCommodity&action_data=" +
            this.$route.params.id
        )
        .then(response => {
          // success callback
          // console.log(response);
          this.commodity = response.data.COMMODITYLIST;
          let i = 0;
          response.data.COMMODITYLIST.forEach(val => {
            if (val.MACHINE_VAILD == "&nbsp;") {
              this.vaildShow[i] = false;
            } else {
              this.vaildShow[i] = true;
            }
            if (val.MACHINE_INVAILD == "&nbsp;") {
              this.invaildShow[i] = false;
            } else {
              this.invaildShow[i] = true;
            }
            let vaildS = val.MACHINE_VAILD.split("|");
            let casArr = new Array();
            for (let j = 0; j < vaildS.length; j++) {
              let cas = vaildS[j].split("：");
              let Obj = {};
              Obj.store = cas[0];
              Obj.machine = cas[1];
              casArr.push(Obj);
            }
            this.infor1[i] = casArr;
            let invaildS = val.MACHINE_INVAILD.split("|");
            let casArr2 = new Array();
            for (let j = 0; j < invaildS.length; j++) {
              let cas2 = invaildS[j].split("：");
              let Obj2 = {};
              Obj2.store = cas2[0];
              Obj2.machine = cas2[1];
              casArr2.push(Obj2);
            }
            this.infor2[i] = casArr2;
            i++;
          });
        })
        .catch(error => {
          // console.log(error);
        });
    },
    //商品信息对比
    contrastCom: function(com1, com2) {
      if (com1 == com2) {
        return false;
      } else {
        return true;
      }
    }
  },
  created() {
    this.getData();
    this.loadCommodity();
  }
};
</script>

<style scoped>
.ge {
  padding: 2.5rem 0 0 0;
}
.contentTwo-head {
  width: 100%;
  margin: 0.5rem 0 0 0;
  padding: 0.5rem 0.5rem 0.5rem 1rem;
  background-color: #fff;
  position: relative;
}
.contentTwo-left {
  width: 60%;
  float: left;
  height: 1.5rem;
  line-height: 1.5rem;
}
.contentTwo-right {
  width: 40%;
  float: left;
  height: 1.5rem;
  line-height: 1.5rem;
  text-align: right;
  padding-right: 1rem;
}
.contentTwo-name {
  float: left;
  height: 1.5rem;
  line-height: 1.5rem;
}
.contentTwo-text {
  font-size: 20px;
  color: #ec9061;
}
.lie-left {
  width: 18%;
  float: left;
  height: 1.5rem;
  line-height: 1.5rem;
}
.lie_right {
  width: 82%;
  float: left;
  height: 1.5rem;
  line-height: 1.5rem;
}
.commodityP {
  color: #b7b8ba;
  padding: 0.5rem;
}
.commodity {
  width: 100%;
  background-color: #fff;
  padding: 0.5rem;
  margin-bottom: 0.5rem;
}
.commodityZ {
  padding: 0.5rem;
}
.store{
  margin-left: 0.5rem;
}
.machine{
  margin-left: 1rem;
}
</style>

